<script setup lang="ts">

import {usePlayStore} from "@/store/play-store.ts";
import {useUserStore} from "@/store/user-store.ts";
import {onMounted, ref} from "vue";
import {findSkinsListApi} from "@/api/setting";
import {SysCodeType} from "@/api/common-types.ts";

const playStore = usePlayStore();
const userStore = useUserStore();

function changeBgImg(url: string) {
  userStore.bgImg = url
  userStore.isChange = true
}

const skinsList = ref<SysCodeType[]>()
onMounted(() => {
  findSkinsListApi().then((res) => {
    if (res.status === 200) {
      skinsList.value = res.data
    }
  }).catch((err) => {
    console.log(err)
  })
})
</script>

<template>
  
  <div class="skins-root-box">
    <h1>背景图片(点击切换)</h1>
    <div class="img-box">
      <div v-for="item in skinsList">
        <img ref="img" @click="changeBgImg(item.configValue)"
             :src="item.configValue"
             alt="">
      </div>
    </div>
  
  </div>
</template>

<style scoped lang="scss">
h1 {
  margin: 3rem;
  color: var(--text-color);
}

.skins-root-box {
  color: var(--text-color);
  height: calc(100vh - 16rem);
  overflow-y: auto;
  
  .img-box {
    height: calc(100vh - 25rem);
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    
    div {
      width: 27rem;
      height: 18rem;
      margin: 2rem;
      background: lightblue;
      
      img {
        width: 27rem;
        height: 18rem;
        object-fit: cover;
        object-position: center;
      }
      
      img:hover {
        transform: scale(1.1);
        transition: 0.5s;
      }
    }
  }
  
}
</style>